<template>
  <div class="screen-container" :style="containerStyle">
    <header class="screen-header">
      <div>
        <img alt="加载图片失败" src="../assets/img/header_border_dark.png" v-show="!item"/>
        <img alt="加载图片失败" src="../assets/img/header_border_light.png" v-show="item"/>
      </div>
      <span class="title" >电商平台实时监控系统</span>
      <div class="title-right">
        <img alt="加载图片失败" class="qiehuan" src="../assets/img/qiehuan_dark.png" v-show="!item"  @click = handleChangeTheme()>
        <img alt="加载图片失败" class="qiehuan" src="../assets/img/qiehuan_light.png" v-show="item"  @click = handleChangeTheme()>
        <span class="datetime">{{dateTime}}</span>
      </div>
    </header>

    <div class="screen-body">
      <section class="screen-left">
        <div id="left-top" :class="fullScreenStatus.trend? 'fullscreen': ''">
          <!-- 销量趋势图表 -->
          <Trend ref="trend"/>
          <div class="resize">
            <span
                :class="['iconfont' ,fullScreenStatus.trend? 'icon-compress-alt':'icon-expand-alt']"
                @click = "changeSize('trend')"
            >
            </span>
          </div>
        </div>

        <div id="left-bottom" :class="fullScreenStatus.seller? 'fullscreen': ''">
          <!-- 商家销售金额图表 -->
          <Seller ref="seller"/>
          <div class="resize"  >
            <span
                :class="['iconfont' ,fullScreenStatus.seller? 'icon-compress-alt':'icon-expand-alt']"
                @click = "changeSize('seller')"
            >
            </span>
          </div>
        </div>

      </section>

      <section class="screen-middle">
        <div id="middle-top" :class="fullScreenStatus.map? 'fullscreen': ''">
          <!-- 商家分布图表 -->
          <Map ref="map"/>
          <div class="resize"  >
            <span
                :class="['iconfont' ,fullScreenStatus.map? 'icon-compress-alt':'icon-expand-alt']"
                @click = "changeSize('map')"
            >
            </span>
          </div>
        </div>

        <div id="middle-bottom" :class="fullScreenStatus.rank? 'fullscreen': ''">
          <!-- 地区销量排行图表 -->
          <Rank ref="rank"/>
          <div class="resize"  >
            <span
                :class="['iconfont' ,fullScreenStatus.rank? 'icon-compress-alt':'icon-expand-alt']"
                @click = "changeSize('rank')"
            >
            </span>
          </div>
        </div>
      </section>

      <section class="screen-right" >
        <div id="right-top" :class="fullScreenStatus.hot? 'fullscreen': ''">
          <!-- 热销商品占比图表 -->
          <Hot ref="hot"/>
          <div class="resize" >
            <span
                :class="['iconfont' , fullScreenStatus.hot? 'icon-compress-alt':'icon-expand-alt']"
                @click = "changeSize('hot')"
            >
            </span>
          </div>
        </div>

        <div id="right-bottom" :class="fullScreenStatus.stock? 'fullscreen': ''">
          <!-- 库存销量分析图表 -->
          <Stock ref="stock" ></Stock>
          <div class="resize"  >
            <span
                class="iconfont "
                :class="fullScreenStatus.stock? 'icon-compress-alt':'icon-expand-alt' "
                @click = "changeSize('stock')"
            >
            </span>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import Hot from '@/components/Hot.vue'
import Map from '@/components/Map.vue'
import Rank from '@/components/Rank.vue'
import Seller from '@/components/Seller.vue'
import Stock from '@/components/Stock.vue'
import Trend from '@/components/Trend.vue'

import { reactive, ref, nextTick, onBeforeUnmount, computed } from "vue";
import { useStore } from 'vuex'
import * as dayjs from 'dayjs'
import { getThemeValue } from "@/utils/theme_utils";

let dateTime = ref()
let timer = setInterval(() => {
  dateTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss")
},1000)

//定义每一个图表的全屏样式
let fullScreenStatus = reactive({
  trend:false,
  seller:false,
  map:false,
  rank:false,
  hot:false,
  stock:false
})

let trend = ref()
let seller = ref()
let map = ref()
let rank = ref()
let hot = ref()
let stock = ref()
let refArr = reactive({trend , seller, map, rank, hot, stock})
let item = ref(false)
const store = useStore()

let containerStyle = computed(() => {
  return {
    backgroundColor: getThemeValue(store.state.theme).backgroundColor,
    color: getThemeValue(store.state.theme).titleColor
  }

})

function handleChangeTheme() {
  item.value = !item.value
  store.commit( 'changeTheme')
}

function changeSize(val){
  //fullScreenStatus.stock = true
  fullScreenStatus[val] = !fullScreenStatus[val]

  //screenAdapter方法必须是fullScreenStatus对象中的改变且更新Dom后调用才有效
  nextTick(() => {
   refArr[val].screenAdapter();
  })
}

onBeforeUnmount(() => {
   clearInterval(timer)
})
</script>

<style scoped lang="less">
.fullscreen {
  position: fixed!important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}

.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
}

.screen-header {

  width: 100%;
  height: 64px;
  font-size: 20px;
  position: relative;
  > div {
    img {
      width: 100%;
    }
  }
  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
  }
  .title-right {
    display: flex;
    align-items: center;
    position:absolute;
    right: 0;
    top: 50%;
    transform: translateY(-80%);
  }
  .qiehuan {
    width: 28px;
    height: 21px;
    cursor: pointer;
  }
  .datetime {
    font-size: 15px;
    margin-left: 10px;
  }
  .logo {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-80%);
  img {
    height: 35px;
    width: 128px;
  }
  }
}
.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 10px;
.screen-left {
  height: 100%;
  width: 27.6%;
#left-top {
  height: 53%;
  position: relative;
}
#left-bottom {
  height: 31%;
  margin-top: 25px;
  position: relative;
}
}
.screen-middle {
  height: 100%;
  width: 41.5%;
  margin-left: 1.6%;
  margin-right: 1.6%;
#middle-top {
  width: 100%;
  height: 56%;
  position: relative;
}
#middle-bottom {
  margin-top: 25px;
  width: 100%;
  height: 28%;
  position: relative;
}
}
.screen-right {
  height: 100%;
  width: 27.6%;
#right-top {
  height: 46%;
  position: relative;
}
#right-bottom {
  height: 38%;
  margin-top: 25px;
  position: relative;
}
}
}
.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
</style>